@charset "utf-8";
@import "common/common";
.carousel-indicators {
    position: absolute;
    bottom: 0;
}
.navbar .dropdown .btn-secondary{
        color: #9d9d9d;
        &:hover{
            color: white;
        }
    }

//猎刃2
.lieren2 {
    a{
        img:hover{
            opacity: 0.8;
        }
    }
    .title1 {
        font-size: 30px;
        color: #2a2a2a;
        margin-top: 35px;
        margin-right: 28px;
    }
    .gameImg {
        margin-bottom: 10px;
        border-radius: 8px;
    }
    .introduce{
        p{
            color: darkgray;
        }
    }
}

//上吧公主
.content-box2 {
    padding-bottom: 60px;
    .title1 {
        font-size: 30px;
        color: #2a2a2a;
        margin-top: 35px;
        margin-right: 28px;
    }
    .introduce {
        p {
            font-size: 12px;
            color: #ababab;
        }
    }
    .image {
        margin-bottom: 10px;
        border-radius: 8px;
        &:hover{
            opacity: 0.8;
        }
    }
}

//更多案例
.example-box {
    padding-bottom: 50px;
    .title2 {
        font-size: 36px;
        color: #2a2a2a;
        margin-bottom: 40px;
    }
    .box {
        text-align: center;
        margin-bottom: 45px;
        p {
            font-size: 14px;
            color: #2a2a2a;
            margin: 0;
        }
    }
}

.example {
    .box {
//      position: relative;
        overflow: hidden;
        &:hover .mask {
            transform: translate(0%, 0%);
        }
        .MoreCases {
            border-radius: 8px;
        }
        .examplePosition{
            a:hover{
                opacity: 0.7;
            }
        }
        .mask {
            transform: translate(-150%);
            transition-duration: 1s;
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0px;
            border-radius: 8px;
            background: rgba(0, 0, 0, 0.7);
            p {
                color: #fff;
                width: 294px;
                font-size: 12px;
                padding-top: 14px;
                padding-left: 14px;
                padding-right: 10px;
            }
        }
    }
}
.examplePosition{
    position: relative;
}
@media (max-width:320px) {
    .example {
        .box {
            .mask {
                width: 260px;
                height: 114px;
                p {
                    color: #fff;
                    width: 260px;
                    font-size: 12px;
                    padding-top: 14px;
                }
            }
        }
    }
}
@media (min-width:321px) and (max-width:375px){
    .example {
        .box {
            .mask {
                width: 303px;
                height: 133px;
                left: 6px;
                p {
                    color: #fff;
                    width: 294px;
                    font-size: 12px;
                    padding-top: 14px;
                }
            }
        }
    }
}
@media (min-width:376px) and (max-width:414px){
    .example {
        .box {
            .mask {
                width: 303px;
                height: 133px;
                left: 26px;
                p {
                    color: #fff;
                    width: 294px;
                    font-size: 12px;
                    padding-top: 14px;
                }
            }
        }
    }
}
@media only screen and (max-width:320px){
    .col-sm-6{
        width: 50%;
    }
    .col-sm-4{
        width: 50%;
    }
}
@media only screen and (max-width:414px){
    .col-xs-6{
        width: 50%;
    }
    .col-xs-6{
        width: 50%;
    }
}
